<script lang="ts" setup>
import { ref } from 'vue'
import dsp from './tabs/dsp.vue'
import ysp from './tabs/ysp.vue'
import daxq from '@/views/daly/dajy/component/gdzl/index.vue'
import { useMainStore } from '@/store/main'
const store = useMainStore()
const loading = ref<boolean>(false)
const activeName = ref('dsp')

const tabsList = ref<any[]>([])

/*
 * 查看档案，添加tab
 */
const currentDaxq = ref<any>()
const currentList = ref<any>([])
const addTab = (row: any) => {
  if (!row.ajdh) {
    row.ajdh = row.dh
  }
  const tab = tabsList.value.find((el) => el.name === row.ajdh)
  if (!tab) {
    tabsList.value.push({
      label: row.ajdh,
      name: row.ajdh,
      closable: true,
    })
    currentList.value.push(row)
  }
  currentDaxq.value = row
  activeName.value = row.ajdh
}

const tabChange = (name: string) => {
  currentDaxq.value = currentList.value.find((el: any) => el.ajdh === name)
  store.saveNodeTreeData(null)
}

/*
 * 关闭查看档案tab页
 */
const removeTab = (name: string) => {
  const i = tabsList.value.findIndex((tab) => tab.name === name)
  if (i > 0) {
    activeName.value = tabsList.value[i - 1].name
    currentDaxq.value = currentList.value.find((el: any) => el.ajdh === activeName.value)
  } else activeName.value = 'ysp'
  tabsList.value.splice(i, 1)
  const idx = currentList.value.findIndex((el: any) => el.ajdh === name)
  if (idx > -1) currentList.value.splice(idx, 1)
  store.saveNodeTreeData(null)
}
</script>
<template>
  <div class="container" v-loading="loading">
    <el-tabs type="card" v-model="activeName" @tab-change="tabChange" @tab-remove="removeTab">
      <el-tab-pane label="待审批" name="dsp">
        <dsp @addTab="addTab" :activeName="activeName"></dsp>
      </el-tab-pane>
      <el-tab-pane label="已审批" name="ysp">
        <ysp @addTab="addTab" :activeName="activeName"></ysp>
      </el-tab-pane>
      <el-tab-pane
        v-for="item in tabsList"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        :closable="item.closable"
        lazy
      >
        <daxq :daxq="currentDaxq" v-if="currentDaxq?.ajdh === activeName"></daxq>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
